// Inspired but simplified version of MDL buttons

// The button component. Defaults to a flat button.
.mdl-button {
  text-decoration: none;
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0;
  height: 40px;
  min-height: 40px;
  line-height: 40px;
  padding: 0 24px;
  margin: 0;
  border: none;
  border-radius: 2px;
  vertical-align: middle;
  background: transparent;
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: background-color 0.2s, color 0.2s;
  outline: none;
  cursor: pointer;
  color: $cool-gray;

  &[data-tip] {
    overflow: visible;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &:hover {
    color: $black;
  }

  &.mdl-button--colored {
    color: $cool-blue;
    text-transform: uppercase;

    &:hover {
      color: darken($cool-blue, 20%);
    }
  }

  &.mdl-button--colored.mdl-button--danger {
    color: $cool-red;

    &:hover {
      color: darken($cool-red, 20%);
    }
  }

  &.mdl-button--colored.mdl-button--warning {
    color: $cool-orange;

    &:hover {
      color: darken($cool-orange, 20%);
    }
  }
}

input.mdl-button[type="submit"] {
  -webkit-appearance: none;
}

// Raised buttons
.mdl-button--raised {
  background: $cool-blue;

  @include box-shadow;

  text-transform: uppercase;

  &.mdl-button--colored {
    background: $cool-blue;
    color: $white;

    &:hover {
      background-color: darken($cool-blue, 5%);
      color: $white;
    }
  }

  &.mdl-button--colored.mdl-button--danger {
    background: $cool-red;
    color: $white;

    &:hover {
      background-color: darken($cool-red, 5%);
      color: $white;
    }
  }

  &.mdl-button--colored.mdl-button--warning {
    background: $cool-orange;
    color: $white;

    &:hover {
      background-color: darken($cool-orange, 5%);
      color: $white;
    }
  }
}

// Icon buttons
.mdl-button--icon {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;

  i {
    font-size: 32px;
  }
}

// Tab buttons
.mdl-button--tab {
  color: $white;
  opacity: 0.7;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  transition: opacity 0.2s;
  height: 50px;
  line-height: 50px;
  padding: 0 32px;

  &:hover {
    opacity: 1;
    color: $white;
    transition: opacity 0.2s;
  }

  &.active {
    opacity: 1;
    border-bottom: 2px solid white;
  }
}

// Disabled buttons

.mdl-button {
  // Bump up specificity by using [disabled] twice.
  &[disabled][disabled],
  &.mdl-button--disabled.mdl-button--disabled {
    color: $cool-gray;
    cursor: default;
    background-color: transparent;
    pointer-events: none;
  }

  &.mdl-button--raised {
    // Bump up specificity by using [disabled] twice.
    &[disabled][disabled],
    &.mdl-button--disabled.mdl-button--disabled {
      background-color: $cool-lightgray;
      color: $cool-gray;
      box-shadow: none;
    }
  }

  &.mdl-button--colored {
    // Bump up specificity by using [disabled] twice.
    &[disabled][disabled],
    &.mdl-button--disabled.mdl-button--disabled {
      color: $cool-gray;
    }
  }
}

@media screen and (max-width: 767px) {
  .mdl-button {
    padding: 0 12px;
  }
}
